<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding: 0;
		margin: 0;
	}
	.spotlight {
      position: relative;
    }
    h1 {
    	display: inline-block;
    	text-transform: uppercase;
    	letter-spacing: 4px;
    	font-size: 84px;
    	line-height: 96px;
    	opacity: .1;
    	font-size: 48px;
    	line-height: 60px;
    	font-weight: 100;
    	margin-bottom: 36px;
	}
	span {
	    display: block;
	}
	h1.searchable {
    position: absolute;
    left: 0;
    opacity: 1;
    -webkit-animation: spotlight 5s cubic-bezier(.455,.03,.515,.955);
    -moz-animation: spotlight 5s cubic-bezier(.455,.03,.515,.955);
    animation: spotlight 5s cubic-bezier(.455,.03,.515,.955);
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    }
	@-webkit-keyframes spotlight {
		0% {
			clip-path: circle(47.5% at 0 33%);
		}
		45% {
			clip-path: circle(52.5% at 100% 33%);
		}
		50% {
			clip-path: circle(45% at 0 66%);
		}
		95% {
			clip-path: circle(55% at 100% 66%);
		}
		100% {
			clip-path: circle(47.5% at 0 33%);
		}
	}
</style>
</head>
<body>
	<div class="spotlight">
		<h1>
			<span>Page</span> 
			<span>Not</span> 
			<span>Found</span>
		</h1> 
		<h1 class="searchable">
			<span>Page</span> 
			<span>Not</span>
			<span>Found</span>
		</h1>
	</div>
</body>
</html>